<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>湖北理工学院 - 校园漫游</title>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4a90e2;
            --primary-dark: #3a7bc8;
            --secondary-color: #f39c12;
            --secondary-dark: #d35400;
            --accent-color: #e74c3c;
            --accent-dark: #c0392b;
            --success-color: #27ae60;
            --text-dark: #2c3e50;
            --text-medium: #555;
            --text-light: #7f8c8d;
            --bg-light: #f8f9fa;
            --bg-white: #ffffff;
            --shadow-sm: 0 2px 5px rgba(0,0,0,0.1);
            --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
            --shadow-lg: 0 8px 20px rgba(0,0,0,0.15);
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 30px;
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft Yahei", "Heiti SC", sans-serif;
        }
        
        body {
            color: var(--text-dark);
            line-height: 1.6;
            overflow-x: hidden;
            background-color: #f5f7fa;
        }
        
        /* 首页样式 */
        #home-page {
            height: 100vh;
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)), url('jiaoshi.jpg') center/cover no-repeat fixed;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }
        
        #home-page::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
            z-index: 1;
        }
        
        .home-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            animation: fadeInUp 1s ease forwards;
            opacity: 0;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .logo {
            font-size: clamp(2.5rem, 6vw, 3.5rem);
            margin-bottom: 20px;
            text-shadow: 0 3px 10px rgba(0,0,0,0.3);
            font-weight: 700;
        }
        
        .logo i {
            color: var(--primary-color);
            margin-right: 15px;
            text-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        h1 {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            margin-bottom: 25px;
            text-shadow: 0 2px 8px rgba(0,0,0,0.3);
            line-height: 1.3;
        }
        
        .slogan {
            font-size: clamp(1rem, 2vw, 1.25rem);
            max-width: 600px;
            margin: 0 auto 40px;
            text-shadow: 0 1px 5px rgba(0,0,0,0.3);
            color: rgba(255,255,255,0.9);
            line-height: 1.7;
        }
        
        .enter-btn {
            padding: 12px 32px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--radius-lg);
            font-size: 1.1rem;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .enter-btn i {
            margin-right: 10px;
            font-size: 1.2rem;
        }
        
        .enter-btn:hover {
            background-color: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(74, 144, 226, 0.5);
        }
        
        /* 漫游页面样式 */
        #tour-page {
            display: none;
            padding: 20px;
            max-width: 1400px;
            margin: 0 auto;
            padding: 30px 20px;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        
        .header h2 {
            color: var(--text-dark);
            font-size: 1.75rem;
            font-weight: 600;
            display: flex;
            align-items: center;
        }
        
        .header h2 i {
            color: var(--primary-color);
            margin-right: 10px;
        }
        
        .nav-controls {
            display: flex;
            gap: 12px;
        }
        
        .back-btn, .reset-route-btn, .swap-route-btn {
            padding: 9px 18px;
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            font-weight: 500;
            box-shadow: var(--shadow-sm);
        }
        
        .reset-route-btn {
            background-color: var(--secondary-color);
        }
        
        .swap-route-btn {
            background-color: var(--primary-color);
        }
        
        .reset-route-btn:hover {
            background-color: var(--secondary-dark);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        
        .swap-route-btn:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        
        .back-btn {
            background-color: var(--accent-color);
        }
        
        .back-btn:hover {
            background-color: var(--accent-dark);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        
        .back-btn i, .reset-route-btn i, .swap-route-btn i {
            margin-right: 8px;
        }
        
        .route-info {
            background-color: var(--bg-white);
            padding: 20px;
            border-radius: var(--radius-md);
            margin-bottom: 25px;
            display: none;
            box-shadow: var(--shadow-sm);
            border-left: 4px solid var(--primary-color);
        }
        
        .route-info.active {
            display: block;
            animation: fadeIn 0.5s ease forwards;
        }
        
        .route-info h3 {
            color: var(--text-dark);
            margin-bottom: 12px;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
        }
        
        .route-info h3 i {
            color: var(--primary-color);
            margin-right: 8px;
        }
        
        .route-distance {
            color: var(--text-light);
            font-size: 0.9rem;
            font-weight: normal;
            margin-left: 10px;
        }
        
        .route-steps {
            margin-top: 15px;
            padding-left: 25px;
        }
        
        .route-steps li {
            margin-bottom: 8px;
            color: var(--text-medium);
            position: relative;
            padding-left: 5px;
        }
        
        .route-steps li::marker {
            color: var(--primary-color);
            font-weight: bold;
        }
        
        .main-content {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            margin-bottom: 35px;
            min-height: 600px;
        }
        
        .map-container {
            flex: 1;
            min-width: 300px;
            position: relative;
            background-color: var(--bg-white);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-md);
            overflow: hidden;
            min-height: 600px;
            transition: var(--transition);
        }
        
        .map-container:hover {
            box-shadow: var(--shadow-lg);
        }
        
        .campus-map {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            border-radius: var(--radius-md);
        }
        
        /* 导航路线相关样式 */
        .route-line {
            position: absolute;
            background-color: var(--primary-color);
            height: 4px;
            transform-origin: 0 0;
            z-index: 4;
            pointer-events: none;
            border-radius: 2px;
            box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
            transition: all 0.5s ease;
        }
        
        /* 路线上的转折点标记 */
        .route-waypoint {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: var(--primary-color);
            border-radius: 50%;
            z-index: 5;
            pointer-events: none;
            box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
            transition: all 0.5s ease;
        }
        
        .location-view {
            flex: 0 0 400px;
            background-color: var(--bg-white);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-md);
            overflow: hidden;
            display: none;
            animation: slideInRight 0.4s ease forwards;
        }
        
        @keyframes slideInRight {
            from { 
                opacity: 0; 
                transform: translateX(30px); 
            }
            to { 
                opacity: 1; 
                transform: translateX(0); 
            }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .location-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .location-view:hover .location-image {
            transform: scale(1.03);
        }
        
        .location-details {
            padding: 20px;
        }
        
        .location-details h3 {
            color: var(--text-dark);
            margin-bottom: 12px;
            font-size: 1.4rem;
            font-weight: 600;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        
        .location-details p {
            color: var(--text-medium);
            margin-bottom: 25px;
            line-height: 1.8;
        }
        
        .close-btn {
            padding: 9px 18px;
            background-color: var(--accent-color);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: var(--transition);
            font-weight: 500;
            display: inline-flex;
            align-items: center;
        }
        
        .close-btn i {
            margin-right: 8px;
        }
        
        .close-btn:hover {
            background-color: var(--accent-dark);
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }
        
        .location-marker {
            position: absolute;
            width: 26px;
            height: 26px;
            background-color: var(--accent-color);
            border-radius: 50%;
            cursor: pointer;
            z-index: 5;
            transition: var(--transition);
            border: 2px solid white;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        .location-marker:hover {
            transform: scale(1.3) rotate(5deg);
            z-index: 10;
        }
        
        .location-marker.active {
            background-color: var(--success-color);
            transform: scale(1.2);
        }
        
        .location-marker.start {
            background-color: var(--success-color);
            box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.3);
            animation: pulse 2s infinite;
        }
        
        .location-marker.end {
            background-color: var(--accent-color);
            box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.3);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4);
            }
            70% {
                box-shadow: 0 0 0 8px rgba(39, 174, 96, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
            }
        }
        
        .location-marker.end {
            animation: pulse-accent 2s infinite;
        }
        
        @keyframes pulse-accent {
            0% {
                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
            }
            70% {
                box-shadow: 0 0 0 8px rgba(231, 76, 60, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
            }
        }
        
        .initial-hint {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: var(--text-light);
            padding: 25px;
            background-color: rgba(255,255,255,0.9);
            border-radius: var(--radius-md);
            max-width: 300px;
            box-shadow: var(--shadow-md);
            transition: var(--transition);
        }
        
        .initial-hint:hover {
            box-shadow: var(--shadow-lg);
        }
        
        .initial-hint i {
            font-size: 28px;
            margin-bottom: 12px;
            display: block;
            color: var(--primary-color);
        }
        
        .nav-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin: 25px 0;
        }
        
        .nav-btn {
            padding: 9px 18px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: var(--transition);
            font-weight: 500;
            box-shadow: var(--shadow-sm);
            white-space: nowrap;
        }
        
        .nav-btn:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        
        .nav-btn.active {
            background-color: var(--primary-dark);
            box-shadow: var(--shadow-md);
        }
        
        .nav-btn.start {
            background-color: var(--success-color);
        }
        
        .nav-btn.end {
            background-color: var(--accent-color);
        }
        
        .navigation-guide {
            text-align: center;
            color: var(--text-light);
            margin: 15px 0;
            font-size: 0.95rem;
            padding: 12px 20px;
            background-color: rgba(74, 144, 226, 0.05);
            border-radius: var(--radius-sm);
            display: inline-block;
            margin-left: auto;
            margin-right: auto;
            max-width: 600px;
        }
        
        .navigation-guide i {
            color: var(--primary-color);
            margin-right: 8px;
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            color: var(--text-light);
            font-size: 0.9rem;
            padding-top: 20px;
            border-top: 1px solid rgba(0,0,0,0.05);
        }
        
        footer p {
            margin-bottom: 5px;
        }
        
        .footer-links {
            margin-top: 10px;
        }
        
        .footer-links a {
            color: var(--primary-color);
            text-decoration: none;
            margin: 0 8px;
            transition: var(--transition);
        }
        
        .footer-links a:hover {
            color: var(--primary-dark);
            text-decoration: underline;
        }
        
        @media (max-width: 992px) {
            .main-content {
                flex-direction: column;
            }
            
            .location-view {
                flex: 0 0 auto;
                width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }
            
            .header {
                flex-direction: column;
                gap: 15px;
                align-items: flex-start;
            }
            
            .nav-controls {
                width: 100%;
                justify-content: space-between;
            }
            
            .back-btn, .reset-route-btn, .swap-route-btn, .close-btn {
                padding: 8px 14px;
                font-size: 0.9rem;
            }
            
            .nav-buttons {
                justify-content: flex-start;
                overflow-x: auto;
                padding: 5px 0 15px;
                margin: 20px -20px;
                padding-left: 20px;
                padding-right: 20px;
                width: calc(100% + 40px);
            }
            
            .map-container {
                min-height: 450px;
            }
            
            .location-image {
                height: 250px;
            }
        }
        
        @media (max-width: 576px) {
            .logo {
                font-size: 2.2rem;
            }
            
            .slogan {
                margin-bottom: 30px;
            }
            
            .enter-btn {
                padding: 10px 24px;
                font-size: 1rem;
            }
            
            .header h2 {
                font-size: 1.5rem;
            }
            
            .route-info {
                padding: 15px;
            }
            
            .main-content {
                min-height: 400px;
            }
            
            .map-container {
                min-height: 400px;
            }
        }
    </style>
</head>
<body>
    <!-- 首页 -->
    <div id="home-page">
        <div class="home-content">
            <div class="logo">
                <i class="fa fa-university"></i>
                <span>湖北理工学院</span>
            </div>
            <h1>校园虚拟漫游系统</h1>
            <p class="slogan">探索校园的每一个角落，感受湖理的独特魅力。支持校园内地点导航，按实际道路规划路线，让您轻松畅游校园。</p>
            <button class="enter-btn" id="enter-tour">
                <i class="fa fa-compass"></i> 开始校园漫游
            </button>
        </div>
    </div>

    <!-- 漫游页面 -->
    <div id="tour-page">
        <div class="container">
            <div class="header">
                <h2><i class="fa fa-map-marker"></i>湖北理工学院校园漫游</h2>
                <div class="nav-controls">
                    <button class="swap-route-btn" id="swap-route" style="display:none">
                        <i class="fa fa-exchange"></i> 交换起止点
                    </button>
                    <button class="reset-route-btn" id="reset-route">
                        <i class="fa fa-refresh"></i> 重置路线
                    </button>
                    <button class="back-btn" id="back-home">
                        <i class="fa fa-arrow-left"></i> 返回首页
                    </button>
                </div>
            </div>

            <!-- 导航路线信息 -->
            <div class="route-info" id="route-info">
                <h3><i class="fa fa-road"></i>导航路线 <span id="route-distance"></span></h3>
                <p><strong>起点：</strong><span id="route-start"></span> → <strong>终点：</strong><span id="route-end"></span></p>
                <ul class="route-steps" id="route-steps">
                    <!-- 路线步骤将在这里动态生成 -->
                </ul>
            </div>

            <p class="navigation-guide">
                <i class="fa fa-info-circle"></i> 导航提示：点击第一个地点设为起点，点击第二个地点设为终点，再次点击新地点将更新终点并实时刷新路线
            </p>

            <div class="main-content">
                <div class="map-container" id="map-container">
                    <img src="map.jpg" alt="湖北理工学院校园地图" class="campus-map">
                    
                    <div class="initial-hint" id="initial-hint">
                        <i class="fa fa-hand-pointer-o"></i>
                        点击地图上的标记点<br>设置起点和终点来规划路线
                    </div>
                    
                    <!-- 地图标记点 -->
                    <div class="location-marker" data-id="1" data-name="东门" style="left: 83%; top: 5%;">1</div>
                    <div class="location-marker" data-id="2" data-name="图书馆" style="left: 40%; top: 20%;">2</div>
                    <div class="location-marker" data-id="3" data-name="教学楼群" style="left: 48%; top: 18%;">3</div>
                    <div class="location-marker" data-id="4" data-name="腾龙学生公寓" style="left: 30%; top: 80%;">4</div>
                    <div class="location-marker" data-id="5" data-name="梅园食堂" style="left: 5%; top: 58%;">5</div>
                    <div class="location-marker" data-id="6" data-name="操场" style="left: 70%; top: 45%;">6</div>
                    <div class="location-marker" data-id="7" data-name="智慧大楼" style="left: 85%; top: 45%;">7</div>
                    <div class="location-marker" data-id="8" data-name="二号食堂" style="left: 58%; top: 30%;">8</div>
                    <div class="location-marker" data-id="9" data-name="创业大楼" style="left: 40%; top: 30%;">9</div>
                    <div class="location-marker" data-id="10" data-name="中门" style="left: 48%; top: 6%;">10</div>
                    <div class="location-marker" data-id="11" data-name="西门" style="left: 20%; top: 46%;">11</div>
                    <div class="location-marker" data-id="12" data-name="毓贤学生公寓" style="left: 5%; top: 90%;">12</div>
                    <div class="location-marker" data-id="13" data-name="X楼" style="left: 75%; top: 25%;">13</div>
                    <div class="location-marker" data-id="14" data-name="K教学楼群" style="left: 25%; top: 40%;">14</div>
                    <div class="location-marker" data-id="15" data-name="西门操场" style="left:30%; top: 62%;">15</div>
                    <div class="location-marker" data-id="16" data-name="毓成学生公寓" style="left: 5%; top: 70%;">16</div>
                    <div class="location-marker" data-id="17" data-name="女生大院" style="left: 95%; top: 25%;">17</div>
                    
                    <!-- 路线将在这里动态生成 -->
                    <div id="route-container"></div>

                </div>
                
                <div class="location-view" id="location-view">
                    <img src="" alt="" class="location-image" id="current-image">
                    <div class="location-details">
                        <h3 id="current-title"></h3>
                        <p id="current-description"></p>
                        <button class="close-btn" id="close-btn">
                            <i class="fa fa-times"></i> 关闭详情
                        </button>
                    </div>
                </div>
            </div>

            <div class="nav-buttons">
                <button class="nav-btn" data-id="1">东门</button>
                <button class="nav-btn" data-id="2">图书馆</button>
                <button class="nav-btn" data-id="3">教学楼群</button>
                <button class="nav-btn" data-id="4">腾龙学生公寓</button>
                <button class="nav-btn" data-id="5">梅园食堂</button>
                <button class="nav-btn" data-id="6">操场</button>
                <button class="nav-btn" data-id="7">智慧大楼</button>
                <button class="nav-btn" data-id="8">静园食堂</button>
                <button class="nav-btn" data-id="9">创业大楼</button>
                <button class="nav-btn" data-id="10">中门</button>
                <button class="nav-btn" data-id="11">西门</button>
                <button class="nav-btn" data-id="12">毓贤学生公寓</button>
                <button class="nav-btn" data-id="13">X楼/button>
                <button class="nav-btn" data-id="14">K教学楼群</button>
                <button class="nav-btn" data-id="15">西门操场</button>
                <button class="nav-btn" data-id="16">毓成学生公寓</button>
                <button class="nav-btn" data-id="17">女生大院</button>
            </div>

            <footer>
                <p>© 2025 湖北理工学院校园漫游系统 | 版权所有</p>
                <div class="footer-links">
                    <a href="#"><i class="fa fa-question-circle"></i> 帮助中心</a>
                    <a href="#"><i class="fa fa-envelope"></i> 联系我们</a>
                    <a href="#"><i class="fa fa-info-circle"></i> 关于系统</a>
                </div>
            </footer>
        </div>
    </div>

    <script>
        // 页面切换控制
        const homePage = document.getElementById('home-page');
        const tourPage = document.getElementById('tour-page');
        const enterTourBtn = document.getElementById('enter-tour');
        const backHomeBtn = document.getElementById('back-home');
        
        enterTourBtn.addEventListener('click', () => {
            homePage.style.display = 'none';
            tourPage.style.display = 'block';
        });
        
        backHomeBtn.addEventListener('click', () => {
            tourPage.style.display = 'none';
            homePage.style.display = 'flex';
            resetRoute(); // 返回首页时重置路线
            hideLocationView();
        });
        
        // 地点数据
        const locations = [
            {
                id: 1,
                name: "东门",
                image: "east-gate.jpg",
                description: "学校主要出入口之一，设有门卫室和访客登记处，门前有公交站点，交通便利。南门广场宽敞，是新生报到和各类活动的举办地。",
                x: 83,  // 相对地图的X坐标百分比
                y: 5   // 相对地图的Y坐标百分比
            },
            {
                id: 2,
                name: "图书馆",
                image: "library.jpg",
                description: "馆藏丰富，拥有纸质图书和电子资源，设有自习区、研讨室和电子阅览室，学习氛围浓厚。图书馆每周一闭馆整理，其余时间对外开放。",
                x: 40,
                y: 20
            },
            {
                id: 3,
                name: "j教学楼群",
                image: "j.jpg",
                description: "包含多栋现代化教学楼，配备先进的多媒体教学设备，是日常上课和自习的主要区域。各教学楼之间有连廊连接，方便雨天通行。",
                x: 48,
                y: 18
            },
            {
                id: 4,
                name: "腾龙学生公寓",
                image: "dormitories.jpg",
                description: "学生住宿区域，分为多个园区，配备空调、热水和公共洗衣房，生活设施齐全。公寓区内有便利店和快递点，满足学生日常生活需求。",
                x: 30,
                y: 80
            },
            {
                id: 5,
                name: "梅园食堂",
                image: "canteen.jpg",
                description: "校内主要餐饮场所，提供丰富多样的美食，涵盖各地风味，价格实惠，满足师生餐饮需求。食堂每日提供早中晚三餐，节假日略有调整。",
                x: 5,
                y: 58
            },
            {
                id: 6,
                name: "操场",
                image: "cc.jpg",
                description: "标准400米塑胶跑道，配备足球场、篮球场和网球场，是师生体育锻炼和课外活动的主要场所。每天清晨和傍晚都有许多师生在这里运动健身。",
                x: 70,
                y: 45
            },
            {
                id: 7,
                name: "智慧大楼",
                image: "wisdom.jpg",
                description: "集教学、科研、实验于一体的现代化综合性大楼，配备先进的智慧教学设备和实验室，是学校信息化教学的核心场所。",
                x: 85,
                y: 45
            },
            {
                id: 8,
                name: "静园食堂",
                image: "canteen02.jpg",
                description: "校内第二大餐饮中心，提供各地特色美食，环境整洁，价格亲民。二楼设有民族餐厅，满足不同饮食习惯师生的需求。",
                x: 58,
                y: 30
            },
            {
                id: 9,
                name: "创业大楼",
                image: "startup-building.jpg",
                description: "为学生创业团队和科技项目提供孵化场地和服务的综合性大楼，设有多个创客空间和会议室，支持学生创新创业实践。",
                x: 40,
                y: 30
            },
            {
                id: 10,
                name: "中门",
                image: "mid-gate.jpg",
                description: "校园中部的主要出入口，靠近教学区和图书馆，方便师生进出。中门周边有多家文具店和打印店，满足学生学习需求。",
                x: 48,
                y: 6
            },
            {
                id: 11,
                name: "西门",
                image: "west-gate.jpg",
                description: "校园西侧出入口，靠近学生生活区，门外有小吃街和超市，生活便利。西门是学生日常出入最频繁的校门之一。",
                x: 20,
                y: 46
            },
            {
                id: 12,
                name: "毓贤学生公寓",
                image: "yuxian.jpg",
                description: "新建的学生公寓楼，配备电梯和独立卫浴，设施完善，环境舒适。主要为高年级学生和研究生提供住宿服务。",
                x: 5,
                y: 90
            },
            {
                id: 13,
                name: "X楼",
                image: "x.jpg",
                description: "X教学楼是湖北理工学院应用型人才培养的核心阵地，以其鲜明的工科特色和紧密的产学研结合而备受瞩目。",
                x: 75,
                y: 25
            },
            {
                id: 14,
                name: "K教学楼群",
                image: "k.jpg",
                description: "K教学楼是湖北理工学院重要的教学枢纽，以其现代化的设施和浓厚的学术氛围，成为学生们探索知识、激发灵感的理想场所。",
                x: 25,
                y: 40
            },
            {
                id: 15,
                name: "西门操场",
                image: "west-cc.jpg",
                description: "西门操场是湖北理工学院最具活力的地标之一，是师生们挥洒汗水、释放激情的首选之地。这里拥有标准的塑胶跑道和绿茵足球场，清晨的第一缕阳光与傍晚的落日余晖，都为运动镀上了最美的底色。无论是日常锻炼、体育课，还是激烈的校际比赛，这里都承载着学子们的速度与激情。",
                x: 30,
                y: 62
            },
            {
                id: 16,
                name: "毓成学生公寓",
                image: "yicheng.jpg",
                description: "毓成学生公寓是湖北理工学院精心打造的现代化学生社区，旨在为同学们提供一个安全、舒适、便捷的生活环境。",
                x: 5,
                y: 70
            },
            {
                id: 17,
                name: "女生大院",
                image: "girls.jpg",
                description: "女生大院不仅是宿舍，更是一个充满安全感的温暖社区。完善的设施和贴心的管理，让每一位女生都能在这里安心生活，专注追梦。",
                x: 95,
                y: 25
            }
        ];
        
        // 路线规划数据
            // 路线规划数据（补充后完整版本）
            const routeData = {
                // 1. 东门(1) ↔ 操场(6)
                "1_6": {
                    distance: 350,
                    waypoints: [
                        { x: 83, y: 5 },   // 东门
                        { x: 82, y: 32 },  // 途经主干道
                        { x: 70, y: 45 }   // 操场
                    ],
                    steps: [
                        "从东门进入，向南直行150米至主干道",
                        "右转沿教学区方向直行200米到达操场"
                    ]
                },
                // 2. 智慧大楼(7) ↔ 创业大楼(9)
                "7_9": {
                    distance: 200,
                    waypoints: [
                        { x: 85, y: 45 },  // 智慧大楼
                        { x: 80, y: 30 },  // 途经X楼
                        { x: 60, y: 30 },  // 途经静园食堂
                        { x: 40, y: 30 }   // 创业大楼
                    ],
                    steps: [
                        "从智慧大楼出发，向西北方向直行100米",
                        "继续向西南直行100米到达创业大楼"
                    ]
                },
                // 3. K教学楼群(14) ↔ 毓贤学生公寓(12)
                "14_12": {
                    distance: 350,
                    waypoints: [
                        { x: 25, y: 40 },  // K教学楼群
                        { x: 25, y: 70 },  // 途经西门操场
                        { x: 25, y: 90 },  // 途经毓成公寓
                        { x: 5, y: 90 }    // 毓贤学生公寓
                    ],
                    steps: [
                        "从K教学楼群出发，向南直行200米",
                        "左转向西直行150米到达毓贤学生公寓"
                    ]
                },
                // 4. 中门(10) ↔ 西门(11)
                "10_11": {
                    distance: 500,
                    waypoints: [
                        { x: 48, y: 6 },   // 中门
                        { x: 40, y: 15 },  // 途经图书馆北侧
                        { x: 30, y: 20 },  // 途经创业大楼西侧
                        { x: 20, y: 46 }   // 西门
                    ],
                    steps: [
                        "从中门出发，向西直行200米至图书馆北侧",
                        "继续沿主干道直行200米",
                        "右转向南直行100米到达西门"
                    ]
                },
                // 5. 操场(6) ↔ 教学楼群(3)
                "6_3": {
                    distance: 300,
                    waypoints: [
                        { x: 70, y: 45 },  // 操场
                        { x: 60, y: 35 },  // 途经静园食堂
                        { x: 50, y: 25 },  // 途经创业大楼东侧
                        { x: 48, y: 18 }   // 教学楼群
                    ],
                    steps: [
                        "从操场出发，向西北直行150米",
                        "左转向北直行100米",
                        "继续直行50米到达教学楼群"
                    ]
                },
                // 6. 创业大楼(9) ↔ 东门(1)
                "9_1": {
                    distance: 300,
                    waypoints: [
                        { x: 40, y: 30 },  // 创业大楼
                        { x: 60, y: 30 },  // 途经静园食堂
                        { x: 80, y: 30 },  // 途经X楼
                        { x: 83, y: 5 }    // 东门
                    ],
                    steps: [
                        "从创业大楼出发，向东直行200米至X楼",
                        "左转向北直行100米到达东门"
                    ]
                },
                // 7. 东门(1) ↔ 图书馆(2)
                "1_2": {
                    distance: 380,
                    waypoints: [
                        { x: 83, y: 5 },   // 东门
                        { x: 70, y: 10 },  // 途经主干道
                        { x: 55, y: 20 },  // 途经教学楼群南侧
                        { x: 40, y: 20 }   // 图书馆
                    ],
                    steps: [
                        "从东门进入，向北直行150米至主干道",
                        "左转向西直行180米",
                        "继续直行50米到达图书馆"
                    ]
                },
                // 8. 图书馆(2) ↔ 教学楼群(3)
                "2_3": {
                    distance: 120,
                    waypoints: [
                        { x: 40, y: 20 },  // 图书馆
                        { x: 45, y: 19 },  // 途经连廊
                        { x: 48, y: 18 }   // 教学楼群
                    ],
                    steps: [
                        "从图书馆出发，向东直行120米（经连廊）到达教学楼群"
                    ]
                },
                // 9. 图书馆(2) ↔ 中门(10)
                "2_10": {
                    distance: 200,
                    waypoints: [
                        { x: 40, y: 20 },  // 图书馆
                        { x: 45, y: 12 },  // 途经主干道
                        { x: 48, y: 6 }    // 中门
                    ],
                    steps: [
                        "从图书馆出发，向北直行100米至主干道",
                        "右转向东直行100米到达中门"
                    ]
                },
                // 10. 梅园食堂(5) ↔ 毓成学生公寓(16)
                "5_16": {
                    distance: 150,
                    waypoints: [
                        { x: 5, y: 58 },   // 梅园食堂
                        { x: 5, y: 70 }    // 毓成学生公寓
                    ],
                    steps: [
                        "从梅园食堂出发，向南直行150米到达毓成学生公寓"
                    ]
                },
                // 11. 毓成学生公寓(16) ↔ 毓贤学生公寓(12)
                "16_12": {
                    distance: 200,
                    waypoints: [
                        { x: 5, y: 70 },   // 毓成学生公寓
                        { x: 5, y: 80 },   // 途经生活区主干道
                        { x: 5, y: 90 }    // 毓贤学生公寓
                    ],
                    steps: [
                        "从毓成学生公寓出发，向南直行200米到达毓贤学生公寓"
                    ]
                },
                // 12. 西门(11) ↔ 西门操场(15)
                "11_15": {
                    distance: 180,
                    waypoints: [
                        { x: 20, y: 46 },  // 西门
                        { x: 25, y: 55 },  // 途经生活区入口
                        { x: 30, y: 62 }   // 西门操场
                    ],
                    steps: [
                        "从西门出发，向东南直行100米",
                        "右转向南直行80米到达西门操场"
                    ]
                },
                // 13. 西门操场(15) ↔ K教学楼群(14)
                "15_14": {
                    distance: 220,
                    waypoints: [
                        { x: 30, y: 62 },  // 西门操场
                        { x: 28, y: 50 },  // 途经生活区主干道
                        { x: 25, y: 40 }   // K教学楼群
                    ],
                    steps: [
                        "从西门操场出发，向北直行120米",
                        "左转向西直行100米到达K教学楼群"
                    ]
                },
                // 14. 静园食堂(8) ↔ 操场(6)
                "8_6": {
                    distance: 150,
                    waypoints: [
                        { x: 58, y: 30 },  // 静园食堂
                        { x: 65, y: 38 },  // 途经主干道
                        { x: 70, y: 45 }   // 操场
                    ],
                    steps: [
                        "从静园食堂出发，向东南直行150米到达操场"
                    ]
                },
                // 15. 女生大院(17) ↔ 东门(1)
                "17_1": {
                    distance: 250,
                    waypoints: [
                        { x: 95, y: 25 },  // 女生大院
                        { x: 90, y: 15 },  // 途经东门北侧
                        { x: 83, y: 5 }    // 东门
                    ],
                    steps: [
                        "从女生大院出发，向西北直行150米",
                        "左转向西直行100米到达东门"
                    ]
                },
                // 16. 腾龙学生公寓(4) ↔ 梅园食堂(5)
                "4_5": {
                    distance: 300,
                    waypoints: [
                        { x: 30, y: 80 },  // 腾龙学生公寓
                        { x: 20, y: 80 },  // 途经西门操场南侧
                        { x: 20, y: 58 },  // 途经生活区
                        { x: 5, y: 58 }    // 梅园食堂
                    ],
                    steps: [
                        "从腾龙学生公寓出发，向西直行150米",
                        "继续向北直行150米到达天桥",
                        "过天桥100米到达梅园食堂"
                    ]
                },
                // 17. X楼(13) ↔ 智慧大楼(7)
                "13_7": {
                    distance: 180,
                    waypoints: [
                        { x: 75, y: 25 },  // X楼
                        { x: 80, y: 35 },  // 途经主干道
                        { x: 85, y: 45 }   // 智慧大楼
                    ],
                    steps: [
                        "从X楼出发，向东南直行100米",
                        "右转向南直行80米到达智慧大楼"
                    ]
                },
                // 18. 教学楼群(3) ↔ 中门(10)
                "3_10": {
                    distance: 250,
                    waypoints: [
                        { x: 48, y: 18 },  // 教学楼群
                        { x: 48, y: 12 },  // 途经主干道
                        { x: 48, y: 6 }    // 中门
                    ],
                    steps: [
                        "从教学楼群出发，向北直行250米到达中门"
                    ]
                },
                // 19. 创业大楼(9) ↔ 图书馆(2)
                "9_2": {
                    distance: 150,
                    waypoints: [
                        { x: 40, y: 30 },  // 创业大楼
                        { x: 40, y: 25 },  // 途经连廊
                        { x: 40, y: 20 }   // 图书馆
                    ],
                    steps: [
                        "从创业大楼出发，向北直行150米（经连廊）到达图书馆"
                    ]
                },
                // 20. 静园食堂(8) ↔ 创业大楼(9)
                "8_9": {
                    distance: 200,
                    waypoints: [
                        { x: 58, y: 30 },  // 静园食堂
                        { x: 50, y: 30 },  // 途经主干道
                        { x: 40, y: 30 }   // 创业大楼
                    ],
                    steps: [
                        "从静园食堂出发，向西直行200米到达创业大楼"
                    ]
                }
            };
        
        // 导航相关变量
        let routePoints = []; // 存储选中的两个导航点 [起点, 终点]
        const mapContainer = document.getElementById('map-container');
        const routeContainer = document.getElementById('route-container');
        const routeInfo = document.getElementById('route-info');
        const routeDistance = document.getElementById('route-distance');
        const routeStart = document.getElementById('route-start');
        const routeEnd = document.getElementById('route-end');
        const routeSteps = document.getElementById('route-steps');
        const resetRouteBtn = document.getElementById('reset-route');
        const swapRouteBtn = document.getElementById('swap-route');
        
        // 漫游功能元素
        const markers = document.querySelectorAll('.location-marker');
        const navButtons = document.querySelectorAll('.nav-btn');
        const locationView = document.getElementById('location-view');
        const currentImage = document.getElementById('current-image');
        const currentTitle = document.getElementById('current-title');
        const currentDescription = document.getElementById('current-description');
        const closeBtn = document.getElementById('close-btn');
        const initialHint = document.getElementById('initial-hint');
        
        // 标记点点击事件 - 动态更新路线
        markers.forEach(marker => {
            marker.addEventListener('click', function() {
                const locationId = parseInt(this.getAttribute('data-id'));
                const location = locations.find(item => item.id === locationId);
                
                // 处理导航点选择和路线更新
                handleRouteUpdate(location);
                
                // 显示地点信息
                showLocation(locationId);
            });
        });
        
        // 导航按钮点击事件 - 也能更新路线
        navButtons.forEach(button => {
            button.addEventListener('click', function() {
                const locationId = parseInt(this.getAttribute('data-id'));
                const location = locations.find(item => item.id === locationId);
                
                // 处理导航点选择和路线更新
                handleRouteUpdate(location);
                
                showLocation(locationId);
            });
        });
        
        // 处理路线更新的核心函数
        function handleRouteUpdate(location) {
            // 移除所有标记的起点/终点样式
            markers.forEach(marker => {
                marker.classList.remove('start', 'end');
            });
            
            // 移除按钮的起点/终点样式
            navButtons.forEach(btn => {
                btn.classList.remove('start', 'end');
            });
            
            // 情况1: 还没有选择任何点 - 设置为起点
            if (routePoints.length === 0) {
                routePoints[0] = location; // 设置起点
                initialHint.style.display = 'none';
            } 
            // 情况2: 已经有起点，但没有终点 - 设置为终点
            else if (routePoints.length === 1) {
                // 如果点击的是起点本身，则不做任何操作
                if (routePoints[0].id === location.id) return;
                
                routePoints[1] = location; // 设置终点
                swapRouteBtn.style.display = 'flex'; // 显示交换按钮
            } 
            // 情况3: 已经有起点和终点 - 更新终点
            else {
                // 如果点击的是起点，则将当前终点设为起点，点击的点设为终点
                if (routePoints[0].id === location.id) {
                    routePoints[0] = routePoints[1];
                    routePoints[1] = location;
                }
                // 如果点击的是终点，则不做任何操作
                else if (routePoints[1].id === location.id) {
                    return;
                }
                // 否则更新终点
                else {
                    routePoints[1] = location;
                }
            }
            
            // 更新标记点样式
            markers.forEach(marker => {
                const id = parseInt(marker.getAttribute('data-id'));
                if (id === routePoints[0].id) {
                    marker.classList.add('start');
                }
                if (routePoints[1] && id === routePoints[1].id) {
                    marker.classList.add('end');
                }
            });
            
            // 更新按钮样式
            navButtons.forEach(btn => {
                const id = parseInt(btn.getAttribute('data-id'));
                if (id === routePoints[0].id) {
                    btn.classList.add('start');
                }
                if (routePoints[1] && id === routePoints[1].id) {
                    btn.classList.add('end');
                }
            });
            
            // 如果已经有两个点，则生成路线
            if (routePoints.length >= 2) {
                generateRoute();
            }
        }
        
        // 关闭详情按钮
        closeBtn.addEventListener('click', hideLocationView);
        
        // 重置路线按钮
        resetRouteBtn.addEventListener('click', resetRoute);
        
        // 交换起点终点按钮
        swapRouteBtn.addEventListener('click', function() {
            if (routePoints.length >= 2) {
                // 交换起点和终点
                [routePoints[0], routePoints[1]] = [routePoints[1], routePoints[0]];
                
                // 重新生成路线
                generateRoute();
                
                // 更新标记点样式
                markers.forEach(marker => {
                    marker.classList.remove('start', 'end');
                    const id = parseInt(marker.getAttribute('data-id'));
                    if (id === routePoints[0].id) {
                        marker.classList.add('start');
                    }
                    if (id === routePoints[1].id) {
                        marker.classList.add('end');
                    }
                });
                
                // 更新按钮样式
                navButtons.forEach(btn => {
                    btn.classList.remove('start', 'end');
                    const id = parseInt(btn.getAttribute('data-id'));
                    if (id === routePoints[0].id) {
                        btn.classList.add('start');
                    }
                    if (id === routePoints[1].id) {
                        btn.classList.add('end');
                    }
                });
            }
        });
        
        // 生成两点之间的路线
        function generateRoute() {
            // 获取起点和终点
            const start = routePoints[0];
            const end = routePoints[1];
            
            // 确保起点ID小于终点ID，便于从routeData中查找
            let routeKey = start.id < end.id ? `${start.id}_${end.id}` : `${end.id}_${start.id}`;
            // 如果路线不存在，反转步骤
            let reverseRoute = start.id > end.id;
            
            // 获取路线数据
            const route = routeData[routeKey];
            
            // 显示路线信息面板
            routeInfo.classList.add('active');
            routeStart.textContent = start.name;
            routeEnd.textContent = end.name;
            
            if (route) {
                // 显示路线距离
                routeDistance.textContent = `(${route.distance}米)`;
                
                // 生成路线步骤
                routeSteps.innerHTML = '';
                let steps = reverseRoute ? [...route.steps].reverse().map(step => {
                    // 反转步骤方向描述
                    return step.replace('向北', '向南')
                               .replace('向南', '向北')
                               .replace('向东', '向西')
                               .replace('向西', '向东')
                               .replace('左转', '右转')
                               .replace('右转', '左转');
                }) : route.steps;
                
                steps.forEach((step, index) => {
                    const li = document.createElement('li');
                    li.innerHTML = `<strong>${index + 1}.</strong> ${step}`;
                    routeSteps.appendChild(li);
                });
                
                // 绘制路线（带动画效果）
                drawRouteLine(route.waypoints, reverseRoute);
            } else {
                // 如果没有预定义路线，显示提示信息
                routeDistance.textContent = ``;
                routeSteps.innerHTML = '<li>抱歉，该路线暂未收录</li>';
                routeContainer.innerHTML = ''; // 清空路线
            }
        }
        
        // 绘制多段路线线
        function drawRouteLine(waypoints, reverse) {
            // 先清空现有路线，但保留元素用于淡出动画
            const existingLines = routeContainer.querySelectorAll('.route-line, .route-waypoint');
            existingLines.forEach(el => {
                el.style.opacity = '0';
                setTimeout(() => el.remove(), 300);
            });
            
            // 短暂延迟后绘制新路线，实现平滑过渡
            setTimeout(() => {
                // 如果需要反转路线
                const points = reverse ? [...waypoints].reverse() : waypoints;
                
                // 获取地图容器尺寸
                const mapRect = mapContainer.getBoundingClientRect();
                const mapWidth = mapRect.width;
                const mapHeight = mapRect.height;
                
                // 绘制每一段路线
                for (let i = 0; i < points.length - 1; i++) {
                    // 起点和终点坐标
                    const startPoint = points[i];
                    const endPoint = points[i + 1];
                    
                    // 计算实际坐标
                    const startX = (startPoint.x / 100) * mapWidth;
                    const startY = (startPoint.y / 100) * mapHeight;
                    const endX = (endPoint.x / 100) * mapWidth;
                    const endY = (endPoint.y / 100) * mapHeight;
                    
                    // 计算距离和角度
                    const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
                    const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;
                    
                    // 创建路线线段
                    const routeLine = document.createElement('div');
                    routeLine.className = 'route-line';
                    routeLine.style.width = '0'; // 初始宽度为0，用于动画
                    routeLine.style.left = `${startX}px`;
                    routeLine.style.top = `${startY}px`;
                    routeLine.style.transform = `rotate(${angle}deg)`;
                    routeLine.style.opacity = '0';
                    
                    // 添加到地图
                    routeContainer.appendChild(routeLine);
                    
                    // 触发动画
                    setTimeout(() => {
                        routeLine.style.width = `${length}px`;
                        routeLine.style.opacity = '1';
                    }, 50 * i); // 每段路线依次出现
                    
                    // 添加途经点标记（除了起点和终点）
                    if (i > 0 && i < points.length - 2) {
                        const waypointMarker = document.createElement('div');
                        waypointMarker.className = 'route-waypoint';
                        waypointMarker.style.left = `${startX}px`;
                        waypointMarker.style.top = `${startY}px`;
                        waypointMarker.style.opacity = '0';
                        routeContainer.appendChild(waypointMarker);
                        
                        // 途经点动画
                        setTimeout(() => {
                            waypointMarker.style.opacity = '1';
                        }, 50 * i + 100);
                    }
                }
            }, 300); // 等待淡出动画完成
        }
        
        // 重置路线
        function resetRoute() {
            // 清空路线点
            routePoints = [];
            
            // 移除标记点的路线样式
            markers.forEach(marker => {
                marker.classList.remove('start', 'end', 'active');
            });
            
            // 移除按钮的路线样式
            navButtons.forEach(btn => {
                btn.classList.remove('start', 'end', 'active');
            });
            
            // 隐藏路线信息和路线
            routeInfo.classList.remove('active');
            routeContainer.innerHTML = '';
            
            // 隐藏交换按钮
            swapRouteBtn.style.display = 'none';
            
            // 显示初始提示
            if (locationView.style.display === 'none') {
                initialHint.style.display = 'block';
            }
        }
        
        // 显示地点信息
        function showLocation(id) {
            const location = locations.find(item => item.id === id);
            if (!location) return;
            
            currentImage.src = location.image;
            currentImage.alt = location.name;
            currentTitle.textContent = location.name;
            currentDescription.textContent = location.description;
            
            locationView.style.display = 'block';
            initialHint.style.display = 'none';
            
            // 更新选中状态
            markers.forEach(marker => {
                marker.classList.toggle('active', parseInt(marker.getAttribute('data-id')) === id);
            });
            
            navButtons.forEach(button => {
                button.classList.toggle('active', parseInt(button.getAttribute('data-id')) === id);
            });
        }
        
        // 隐藏地点信息
        function hideLocationView() {
            locationView.style.display = 'none';
            
            // 如果没有选择任何路线点，显示初始提示
            if (routePoints.length === 0) {
                initialHint.style.display = 'block';
            }
        }
    </script>
</body>
</html>

